<template>
  <div class="record">
    <div class="title">更新记录</div>
    <div class="record-item" v-for="(item,index) in recordLis" :key="index">
      <p><span>更新时间：</span><span><i class="jcfont jcshijian"></i>{{ item.updateTime }}</span></p>
      <p><span>更新类型：</span><span><i class="jcfont jcbanbengengxin"></i>{{ item.updateType }}</span></p>
      <p>
        <span>更新内容：</span>
        <span>
          <p v-for="(p,pindex) in item.updateContent" :key="pindex">
            <i class="jcwancheng jcfont"></i>
            {{ p }}
          </p>
        </span>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'record',
    data(){
      return{
        recordLis: []
      }
    },
    created(){
      setTimeout(()=>{
        this.recordLis = Object.freeze([
          {
            updateTime: '2020-04-05 12:00:00',
            updateType: '版本更新',
            updateContent: [
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式'
            ]
          },
          {
            updateTime: '2020-04-05 12:00:00',
            updateType: '版本更新',
            updateContent: [
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式'
            ]
          },
          {
            updateTime: '2020-04-05 12:00:00',
            updateType: '版本更新',
            updateContent: [
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式'
            ]
          },
          {
            updateTime: '2020-04-05 12:00:00',
            updateType: '版本更新',
            updateContent: [
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式'
            ]
          },
          {
            updateTime: '2020-04-05 12:00:00',
            updateType: '版本更新',
            updateContent: [
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式',
              '修改 “首页” 个人展示的样式'
            ]
          }
        ])
      },1000)
    }
  }
</script>
<!--

更新方式有三种：版本升级，特性更新，修改补丁

 -->
<style lang="scss" scoped>
  .record{
    @include panel;
    font-size: 13px;
    .title{
      text-align: center;
      padding-bottom: 30px;
      font-weight: 600;
      font-size: 16px;
    }
    .record-item{
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      padding-top: 10px;
      &:last-child{
        border-bottom: none;
      }
      i{
        color: $success-color;
      }
      >p{
        margin-bottom: 5px;
        display: flex;
        >span:first-child{
          width: 70px;
          line-height: 20px;
        }
        >span:last-child{
          flex: 1;
          i{
            margin-right: 5px;
          }
          p{
            margin-bottom: 2px;
          }
        }
      }
    }
  }
</style>
